<template>
    <base-modal
        :title="initData.pageType === 'edit' ? ' 业态编辑' : ' 业态添加'"
        cancelText="取消"
        okText="保存"
        :width="900"
        v-on="$listeners"
        @ok="handleOk"
        :confirmLoading="loading.isSaving"
    >
        <a-form-model
            ref="form"
            :model="formInfo"
            :rules="rules"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
        >
            <a-row :gutter="24">
                <a-col :md="12" :sm="12">
                    <a-form-model-item label="费用名称" prop="name">
                        <BaseInput placeholder="请输入" v-model.trim="formInfo.name" />
                    </a-form-model-item>
                </a-col>
                <a-col :md="12" :sm="12">
                    <a-form-model-item label="状态" prop="enabled">
                        <a-select placeholder="请选择状态" v-model="formInfo.enabled">
                            <a-select-option :value="1">可用</a-select-option>
                            <a-select-option :value="0">不可用</a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>
    </base-modal>
</template>

<script>
import { addSelectListByType, updateSelectListByType, getSelectListByTypeDetail } from '@/api/businessAffairs/common.js'
import BaseModal from '@/components/BaseModal'
export default {
    name:'a'+Date.now(),
    components: {
        BaseModal,
    },
    props: {
        initData: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            loading: {
                isSaving: false,
            },
            formInfo: {
                name: '',
                enabled: 1,
            },
            rules: {
                name: [{ required: true, message: '请输入名称', trigger: 'change' }],
                enabled: [{ required: true, message: '请选择状态', trigger: 'change' }],
            },
        }
    },
    created() {
        this.getDetail()
    },
    methods: {
        validateForm() {
            let flag = false
            this.$refs.form.validate((valid) => {
                flag = valid
            })
            return flag
        },
        async getDetail() {
            const { id } = this.initData
            if (!id) return
            const params = {
                id,
            }
            const [err, res] = await getSelectListByTypeDetail(params)
            if (!err) {
                this.formInfo = {
                    ...this.formInfo,
                    ...res.data,
                    enabled: res.data.enabled ? 1 : 0,
                }
            }
        },
        async handleOk() {
            if (!this.validateForm()) return
            if (this.loading.isSaving) return
            this.loading.isSaving = true
            const { id, name, enabled } = this.formInfo
            const params = {
                id,
                name,
                enabled,
                type: 14,
            }
            console.log(params)
            const { pageType } = this.initData
            const fn = pageType === 'edit' ? updateSelectListByType : addSelectListByType
            const [err, res] = await fn(params)
            if (!err) {
                this.$message.success('成功')
                this.$emit('confirm')
            }
            this.loading.isSaving = false
        },
    },
}
</script>

<style lang="less" scoped>
form .ant-mentions,
form textarea.ant-input {
    height: auto !important;
    width: 100%;
}
</style>